<template>
  <view class="obc">
    <view class="obt">
      <view class="oid"> 订单号：{{ data.extend.ordernum }}</view>
      <view class="otype" v-if="data.extend.etype == 0">
        <text v-if="data.extend.status == 0" class="st0">待付款</text>
        <text
          v-if="data.extend.status == 1 && data.extend.freight_type != 1"
          class="st1"
          >待发货</text
        >
        <text
          v-if="data.extend.status == 1 && data.extend.freight_type == 1"
          class="st1"
          >待提货</text
        >
        <text v-if="data.extend.status == 2" class="st2">待收货</text>
        <text v-if="data.extend.status == 3" class="st3">已完成</text>
        <text v-if="data.extend.status == 4" class="st4">已关闭</text>
      </view>
      <view class="otype" v-else-if="data.extend.etype == 1">
        <text v-if="data.extend.refund_status == 0" class="st3">取消</text>
        <text v-if="data.extend.refund_status == 1" class="st0">审核中</text>
        <text v-if="data.extend.refund_status == 2" class="st4">通过</text>
        <text v-if="data.extend.refund_status == 3" class="st2">驳回</text>
        <text v-if="data.extend.refund_status == 4" class="st2"
          >审核通过,待退货</text
        >
      </view>
      <view class="otype" v-else>
        <text class="st2">{{ data.extend.orderStatus }}</text></view
      >
    </view>
    <view
      class="obody"
      v-for="(item, index) in data.extend.prolist"
      :key="index"
    >
      <view class="ol">
        <image
          class="pic"
          :src="item.pic"
          mode="aspectFill"
          @click="toPro"
        ></image>
      </view>
      <view class="or" @click="toOrder">
        <view class="on">
          {{ item.name }}
        </view>
        <view class="op">
          <view>￥{{ item.sell_price }}</view>
          <view v-if="data.extend.etype == 1"> x{{ item.refund_num }}</view>
          <view v-else> x{{ item.num }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var app = getApp();
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    right: Boolean,
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    toPro() {},
    toOrder() {
      if (this.data.extend.etype == 0) {
        app.goto("/pagesExt/order/detail?id=" + this.data.extend.orderid);
      } else if (this.data.extend.etype == 1) {
        if (this.data.extend.refund_id) {
          app.goto(
            "/pagesExt/order/refundDetail?id=" + this.data.extend.refund_id
          );
        } else {
          app.goto("/pagesExt/order/detail?id=" + this.data.extend.orderid);
        }
      } else {
        app.goto("/pagesExt/order/detail?id=" + this.data.extend.orderid);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.obc {
  background-color: #fff;
  border-radius: 16rpx;

  .obt {
    display: flex;
    direction: ltr;
    justify-content: space-between;
    align-items: center;
    padding: 6rpx;
    max-width: 70vw;
    .oid {
      color: gray;
      font-size: 24rpx;
      text-wrap: wrap;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-align: left;
      margin-left: 10rpx;
    }

    .otype {
      //   position: absolute;
      //   top: 0;
      //   margin-right: 10rpx;

      .st0 {
        width: 140rpx;
        color: #ff8758;
        text-align: right;
      }

      .st1 {
        width: 140rpx;
        color: #ffc702;
        text-align: right;
      }

      .st2 {
        width: 140rpx;
        color: #ff4246;
        text-align: right;
      }

      .st3 {
        width: 140rpx;
        color: #999;
        text-align: right;
      }

      .st4 {
        width: 140rpx;
        color: #bbb;
        text-align: right;
      }
    }
  }

  .obody {
    display: flex;
    gap: 10rpx;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 10rpx;
    width: 70vw;
    direction: ltr;

    .ol {
      width: 120rpx;
      height: 120rpx;

      image {
        width: 120rpx;
        height: 100%;
        border-radius: 16rpx;
        margin: auto;
      }
    }

    .or {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .on {
        font-size: 30rpx;
        text-wrap: wrap;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .op {
        color: #ff4246;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
